<template>
  <div class="tabbar border-top-1px">
    <ares-tab-bar
      v-model="selectedLabelDefault"
      :data="tabs"
      @click="clickHandler"
      @change="changeHandler">
    </ares-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLabelDefault: 'Vip',
      tabs: [{
        label: 'Home',
        icon: 'aresic-home',
      }, {
        label: 'Like',
        icon: 'aresic-like',
      }, {
        label: 'Vip',
        icon: 'aresic-vip',
      }, {
        label: 'Me',
        icon: 'aresic-person',
      }],
    };
  },
  methods: {
    clickHandler() {
    },
    changeHandler() {},
  },
};
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #fff;
}
</style>
